<template>
	<div ref="dom" class="charts chart-tree"></div>
</template>

<script>
import * as echarts from 'echarts'
import tdTheme from './theme.json';
import { on, off } from '@/libs/tools';
// echarts.registerTheme('tdTheme', tdTheme);
export default {
	name: 'ChartTree',
	props: {
		value: Array,
		text: String,
		subtext: String,
		series: Array,
		grid: Object,
		legend: Object,
		tooltip: Object
	},
	data() {
		return {
			dom: null
		};
	},
	watch: {
		value: {
			deep: true,
			handler(val) {
				this.intChart();
			}
		},
		series: {
			deep: true,
			handler(val) {
				this.intChart();
			}
		}
	},
	methods: {
		resize() {
			this.dom.resize();
		},
		intChart() {
			var that = this;
			this.$nextTick(() => {
				let option = {
					title: {
						text: this.text,
						subtext: this.subtext,
						x: 'center'
					},
					series: [
						{
							type: 'tree',
							tooltip: {
								trigger: 'item',
								triggerOn: 'mousemove'
							},
							data: that.value,
							top: '30%',
							bottom: '30%',
							left: '15%',
							right: '15%',
							layout: 'radial',
							symbol: 'arrow',
							itemStyle: {
								normal: {
									color: '#808695',
									borderColor: '#2b85e4'
								}
							},
							lineStyle: {
								curveness: 1
							},
							label: {
								fontSize: 10,
								fontFamily: '微软雅黑',
								color: '#c5c8ce',
								formatter: function(params) {
									if (params.value <= 0 || params.value == undefined) {
										return params.name;
									}
									return params.name + '(' + params.value + '次)';
								}
							},
							symbolSize: 5,
							initialTreeDepth: 3,
							animationDurationUpdate: 750
						}
					]
				};
				this.dom = echarts.init(this.$refs.dom, 'tdTheme');
				this.dom.setOption(option);
				on(window, 'resize', this.resize);
			});
		}
	},
	mounted() {
		this.intChart();
	},
	beforeDestroy() {
		off(window, 'resize', this.resize);
	}
};
</script>
